<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/proList.css" />
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="element-ui/lib/index.js"></script>
<script src="js/axios.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	function a() {
		var span1 = '';
		var uname = window.localStorage.getItem('uname');
		var status = window.localStorage.getItem('status');
		console.log(status);
		if (status == 0) {
			span1 = `<span class="fl">` + `欢迎您&nbsp:&nbsp&nbsp&nbsp&nbsp` + uname + `</span>`
			$("#mygxin").html(" ");
			$("#mygxin").append(span1);
			$("#login").hide();
			$("#reg").hide();
		} else {
			alert("请先登录！")
			window.location.href = "login.html";
		}
	}
	$(function () {
		a();
	})
</script>
</head>

<body>
	<!------------------------------head------------------------------>
	<div class="head">
		<div class="wrapper clearfix">
			<div class="clearfix" id="top">
				<h1 class="fl"><a href="index.html"><img src="img/logo.png" style="width: 380px;
						height: 160px;
						position: absolute;
						top: -46px;
						left: 85px;" /></a></h1>
				<div class="fr clearfix" id="top1">
					<p class="fl">
						<a href="mygxin.html" id="mygxin"></a>
						<a href="login.html" id="login">登录</a>
						<a href="reg.html" id="reg">注册</a>
					</p>

				</div>
			</div>
		</div>
		<ul class="clearfix" id="bott">
			<li><a href="index.html">首页</a></li>
			<li>
				<a href="#">水果分类</a>
				<div class="sList">
					<div class="wrapper  clearfix">
						<a href="paint.html">
							<dl>
								<dd>瓜果类</dd>
							</dl>
						</a>
						<a href="paint.html">
							<dl>
								<dd>浆果类</dd>
							</dl>
						</a>
						<a href="paint.html">
							<dl>
								<dd>柑橘类</dd>
							</dl>
						</a>
						<a href="paint.html">
							<dl>
								<dd>核果类</dd>
							</dl>
						</a>
						<a href="paint.html">
							<dl>
								<dd>坚果类</dd>
							</dl>
						</a>


					</div>
				</div>
			</li>
			<li>
				<a href="flowerDer.html">热销推荐</a>
				<div class="sList2">
					<div class="clearfix">
						<a href="bzproList.html">西瓜</a>
						<a href="bzproList.html">荔枝</a>
						<a href="bzproList.html">蓝莓</a>
						<a href="bzproList.html">香蕉</a>
						<a href="bzproList.html">杨梅</a>
						<a href="bzproList.html">葡萄</a>
						<a href="bzproList.html">哈密瓜</a>
						<a href="bzproList.html">芒果</a>
						<a href="bzproList.html">枇杷</a>
						<a href="bzproList.html">樱桃</a>
						<a href="bzproList.html">车厘子</a>
					</div>
				</div>
			</li>
			<li>
				<a href="bzproList.html">时令水果</a>
				<div class="sList2">
					<div class="clearfix">
						<a href="bzproList.html">火龙果</a>
						<a href="bzproList.html">西瓜</a>
						<a href="bzproList.html">荔枝</a>
						<a href="bzproList.html">李子</a>
						<a href="bzproList.html">杨梅</a>
						<a href="bzproList.html">百香果</a>
						<a href="bzproList.html">车厘子</a>
						<a href="bzproList.html">樱桃</a>
						<a href="bzproList.html">枇杷</a>
					</div>
				</div>
			</li>
			<li><a href="#">限时特卖</a></li>
			<li><a href="#">国产优选</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</div>
	<!-- 购物车 -->
	<div id="app" class="wrapper clearfix">
		<template>
			<div>
				<el-table :data="tableData" style="width: 100%; " @selection-change="selected">
					<el-table-column align="center" header-align="center" type="selection" width="50">
					</el-table-column>
					<el-table-column header-align="center" label="商品名称" width="160">
						<template slot-scope="scope">
							<div style="height: 50px; line-height: 50px;">
								<img :src="scope.row.furl" style="height: 50px; line-height: 50px;width: 50px;">
								<div style="font-size: 18px; float: right; width: 80px;" header-align="center"
									align="center">{{scope.row.fname}}</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" header-align="center" label="单价" width="150" prop="sprice">
					</el-table-column>
					<el-table-column align="center" header-align="center" label="数量" width="200">
						<template slot-scope="scope">
							<div>
								<el-input v-model="scope.row.snumber" @change="handleInput(scope.row)" :disabled="edit">
									<el-button slot="prepend" @click="del(scope.row)"><i class="el-icon-minus"></i>
									</el-button>
									<el-button slot="append" @click="add(scope.row)"><i class="el-icon-plus"></i>
									</el-button>
								</el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" header-align="center" label="小计" width="150" prop="price">
					</el-table-column>
					<el-table-column align="center" header-align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="danger" @click="handleDelete(scope.row)">
								删除<i class="el-icon-delete2 el-icon--right"></i>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<br>
				<el-button type="info" style="float: right" @click="jiesuan()">{{"结算" + moneyTotal}}</el-button>
				<el-dialog :visible.sync="dialogFormVisible" title="查看详情">
					<el-form :model="order">
						<el-form-item label="请输入地址" :label-width="formLabelWidth">
							<el-input v-model="order.omessage" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="商品名称" :label-width="formLabelWidth">
							<el-input v-model="order.onote" autocomplete="off" :disabled="edit"></el-input>
						</el-form-item>
						<el-form-item label="商品数量" :label-width="formLabelWidth">
							<el-input v-model="order.snumber" autocomplete="off" :disabled="edit"></el-input>
						</el-form-item>
						<el-form-item label="商品单价" :label-width="formLabelWidth">
							<el-input v-model="order.danjia" autocomplete="off" :disabled="edit"></el-input>
						</el-form-item>
						<el-form-item label="商品总价" :label-width="formLabelWidth">
							<el-input v-model="order.zongjia" autocomplete="off" :disabled="edit"></el-input>
						</el-form-item>
						<el-form-item label="优惠券" :label-width="formLabelWidth">
							<el-select v-model="order.ocoupan" placeholder="请选择状态" @change="gaibian(order.ocoupan)">
								<el-option v-for="item in UsersCoupanList" :key="item.cname" :label="item.cname"
									:value="item.cmoney"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="实付" :label-width="formLabelWidth">
							<span v-if="order.ocoupan==undefined && this.isMemberd==1">{{fun(order.zongjia*0.8)}}</span>
							<span v-if="order.ocoupan==undefined && this.isMemberd==0">{{fun(order.zongjia)}}</span>
							<span
								v-if="this.isMemberd==1 && order.ocoupan != undefined">{{fun(order.zongjia*0.8-this.order.ocoupan)}}</span>
							<span
								v-if="this.isMemberd==0  && order.ocoupan != undefined">{{fun(order.zongjia-this.order.ocoupan)}}</span>



						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancel()">取 消</el-button>
						<el-button type="primary" @click="addOrder()">提交订单</el-button>
					</div>
				</el-dialog>
			</div>
		</template>
	</div>

	<!--返回顶部-->
	<div class="gotop">
		<a href="cart.html">
			<dl>
				<dt><img src="img/gt1.png" /></dt>
				<dd>去购<br />物车</dd>
			</dl>
		</a>
		<a href="#" class="dh">
			<dl>
				<dt><img src="img/gt2.png" /></dt>
				<dd>联系<br />客服</dd>
			</dl>
		</a>
		<a href="mygxin.html">
			<dl>
				<dt><img src="img/gt3.png" /></dt>
				<dd>个人<br />中心</dd>
			</dl>
		</a>
		<a href="#" class="toptop" style="display: none;">
			<dl>
				<dt><img src="img/gt4.png" /></dt>
				<dd>返回<br />顶部</dd>
			</dl>
		</a>
		<p>400-800-8200</p>
	</div>
	<!--footer-->
	<div class="footer">
		<div class="top">
			<div class="wrapper">
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot1.png" /></a>
					<span class="fl">7天无理由退货</span>
				</div>
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot2.png" /></a>
					<span class="fl">15天免费换货</span>
				</div>
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot3.png" /></a>
					<span class="fl">满599包邮</span>
				</div>
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot4.png" /></a>
					<span class="fl">手机特色服务</span>
				</div>
			</div>
		</div>
		<p class="dibu">水果商城&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
	</div>



	<!----------------mask------------------->
	<div class="mask"></div>
	<!-------------------mask内容------------------->
	<div class="proDets">
		<img class="off" src="img/temp/off.jpg" />
		<div class="proCon clearfix">
			<div class="proImg fr">
				<img class="list" src="img/temp/proDet.jpg" />
				<div class="smallImg clearfix">
					<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
					<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
					<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
					<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
				</div>
			</div>
			<div class="fl">
				<div class="proIntro change">
					<p>颜色分类</p>
					<div class="smallImg clearfix">
						<p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花"
								data-src="img/temp/proBig01.jpg"></p>
						<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草"
								data-src="img/temp/proBig02.jpg"></p>
						<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg">
						</p>
						<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg">
						</p>
					</div>
				</div>
				<div class="changeBtn clearfix">
					<a href="#2" class="fl">
						<p class="buy">确认</p>
					</a>
					<a href="#2" class="fr">
						<p class="cart">取消</p>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="pleaseC">
		<p>请选择宝贝</p>
		<img class="off" src="img/temp/off.jpg" />
	</div>
	<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>
<script type="text/javascript">
	let s = new Vue({
		el: "#app",
		data: {
			tableData: [],
			moneyTotal: 0,
			multipleSelection: [],
			UsersCoupanList: [],
			isMemberd: '',
			max: '',
			dialogFormVisible: false,
			order: {
				omessage: '',
				oprice: '',
				onote: '',
				ocoupan: '',
				orprice: '',
				danjia: '',
				zongjia: '',
			},
			formLabelWidth: '120px',
			edit: true
		},
		methods: {
			fun(val) {
				console.log("获取到的" + val);
				if (Number(val) < 0) {
					val = 0;
					return Number(val);
				} else {
					return Number(val).toFixed(2);
				}
			},

			gaibian(s) {
				this.order.ocoupan = s
			},
			getKucun() {
				console.log(this.tableData[0].fid);
				axios.get('http://localhost:8088/fruit/getFruitById/' + this.tableData[0].fid).then(res => {
					this.max = res.data.data.fstock
					console.log("直接获取到的最大值" + this.max);
				})
			},

			getUsersCoupanList() {
				axios.get('http://localhost:8088/coupan/getUsersCoupanList1/' + window.localStorage.getItem("uid")).then(res => {
					console.log(res.data);
					this.UsersCoupanList = res.data;
				})
			},
			isMember() {
				axios.get('http://localhost:8088/users/isMember/' + window.localStorage.getItem("uid")).then(res => {
					this.isMemberd = res.data;
				})
			},
			jiesuan() {
				console.log(this.tableData);
				this.order = this.tableData[0]
				this.order.onote = this.tableData[0].fname
				this.order.zongjia = this.tableData[0].price
				this.order.danjia = this.tableData[0].sprice;
				this.order.oprice = this.moneyTotal
				this.getUsersCoupanList()
				this.isMember();

				//  axios({
				//   method:'POST',
				//   url:"/shopcar/jiesuan",
				//   data:this.tableData
				//  }).then(res=>{
				//   console.log(res);
				//  })
				this.dialogFormVisible = true
			},
			addOrder() {
				if (this.UsersCoupanList.length == 0) {
					this.order.ocoupan = 0;
					if (this.isMemberd == 1) {
						if ((this.order.zongjia * 0.8 - this.order.ocoupan).toFixed(2) < 0) {
							this.order.orprice = 0;
						} else {
							this.order.orprice = (this.order.zongjia * 0.8 - this.order.ocoupan).toFixed(2)
						}
					} else {
						if ((this.order.zongjia - this.order.ocoupan).toFixed(2) < 0) {
							this.order.orprice = 0;
						} else {
							this.order.orprice = (this.order.zongjia - this.order.ocoupan).toFixed(2)
						}

					}
				} else {
					if (this.isMemberd == 1) {
						if ((this.order.zongjia * 0.8 - this.order.ocoupan).toFixed(2) < 0) {
							this.order.orprice = 0;
						} else {
							this.order.orprice = (this.order.zongjia * 0.8 - this.order.ocoupan).toFixed(2)
						}
					} else {
						if ((this.order.zongjia - this.order.ocoupan).toFixed(2) < 0) {
							this.order.orprice = 0;
						} else {
							this.order.orprice = (this.order.zongjia - this.order.ocoupan).toFixed(2)
						}
					}
				}



				axios({
					url: 'http://localhost:8088/order/addOrder',
					method: 'post',
					data: this.order,
				}).then(res => {
					console.log(res);
					this.dialogFormVisible = false
					this.gouwuche();
				})
			},
			gouwuche() {
				axios.get('http://localhost:8088/shopcar/myCar/' + window.localStorage.getItem("uid")).then(res => {
					this.tableData = res.data;
					console.log(res.data);
					console.log("购物车" + this.tableData);
				})
			},
			handleDelete(row) {

				this.$confirm('确定删除该商品？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.get('http://localhost:8088/shopcar/delCar/' + row.sid).then(res => {
						this.gouwuche();
					})
					this.$message({
						type: 'success',
						message: '删除成功!'

					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}, handleInput: function (value) {
				if (null == value.snumber || value.snumber == "") {
					value.snumber = 1;
				}
				value.price = (value.snumber * value.sprice).toFixed(2);//保留两位小数
				//增加商品数量也需要重新计算商品总价
				this.selected(this.multipleSelection);
			},
			add: function (addGood) {
				//输入框输入值变化时会变为字符串格式返回到js
				//此处要用v-model，实现双向数据绑定
				if (typeof addGood.snumber == 'string') {
					addGood.snumber = parseInt(addGood.snumber);


				};

				this.getKucun();
				if (this.max == '') {
					addGood.snumber += 1;
					addGood.price = addGood.snumber * addGood.sprice.toFixed(2);
				}
				else if (addGood.snumber < this.max) {
					addGood.snumber += 1;
					addGood.price = (addGood.snumber * addGood.sprice).toFixed(2);
				} else {
					alert("库存不足！")
				}

			},
			del: function (delGood) {
				if (typeof delGood.snumber == 'string') {
					delGood.snumber = parseInt(delGood.snumber);
				};
				if (delGood.snumber > 1) {
					delGood.snumber -= 1;
					delGood.price = (delGood.snumber * delGood.sprice).toFixed(2);
				}
			},
			//返回的参数为选中行对应的对象
			selected: function (selection) {
				this.multipleSelection = selection;
				this.moneyTotal = 0;
				// if(this.multipleSelection==''){
				//   console.log("空");
				// }
				// console.log("选择"+selection+"haiahi");
				//此处不支持forEach循环，只能用原始方法了
				for (var i = 0; i < selection.length; i++) {
					//判断返回的值是否是字符串
					if (typeof selection[i].goodTotal == 'string') {
						selection[i].goodTotal = parseInt(selection[i].goodTotal);
					};
					selection[i].sstatus = 1;
					// console.log(selection[i].sstatus);
					this.moneyTotal += selection[i].price;
				}
			},
			cancel: function () {
				this.$message.info("当前操作已取消"),
					this.dialogFormVisible = false
			},
		},
		created() {
			this.gouwuche()
			this.isMember();

		}
	})
</script>